<template>
    <div class="ping">
        <header>
            <div class="up">
                <router-link :to="{path:'/discuss', query:{caricatureId:caricatureId,name:name,img:img} }"
                    class="close">
                    &lt; </router-link>
                <span class="name">发表评论</span>
            </div>
        </header>
        <main>
            <img :src="img" alt="">
            <p>{{name}}</p>
            <div class="xing">
                <div class="star">
                    <i @click="average = 1" class="bi bi-star"></i>
                    <i @click="average = 2" class="bi bi-star"></i>
                    <i @click="average = 3" class="bi bi-star"></i>
                    <i @click="average = 4" class="bi bi-star"></i>
                    <i @click="average = 5" class="bi bi-star"></i>
                </div>
                <div class="star2" :style="[{width:`${((average)/5)*49.8667}vw`}]">
                    <i @click="average = 1" class="bi bi-star-fill"></i>
                    <i @click="average = 2" class="bi bi-star-fill"></i>
                    <i @click="average = 3" class="bi bi-star-fill"></i>
                    <i @click="average = 4" class="bi bi-star-fill"></i>
                    <i @click="average = 5" class="bi bi-star-fill"></i>
                </div>
            </div>
            <p class="pingfeng">点击评分</p>
            <textarea name="textarea" v-model="yl" placeholder="你觉得这部漫画怎么样呢?分享一下阅读后的感受吧"></textarea>
            <span class="fabu on" @click="setPL">发布</span>
            <span class="fabu" v-if="this.yl.length < 1 || this.average == 0">发布</span>
        </main>
        <div class="bengbu" v-if="is">
            <div>发送成功!! ^_^</div>
        </div>
    </div>
</template>
<script>
const axios = require('axios');
const Qs = require('qs')
export default {
    name: 'ping',
    data() {
        return {
            caricatureId: this.$route.query.caricatureId,
            name: this.$route.query.name,
            img: this.$route.query.img,
            yl: '',
            average: 0,
            is: false,
            fileList: [],
            name: ''
        }
    },
    methods: {
        setPL() {
            let data = {
                caricatureId: this.caricatureId,
                yl: this.yl,
                time: new Date().toLocaleDateString() + '-' + new Date().toLocaleTimeString(),
                xing: this.average
            }
            if (this.yl.length > 1 && this.average != 0) {
                axios({
                    method: 'post',
                    url: `http://127.0.0.1/pingluen/pin`,
                    data: Qs.stringify(data)
                })
                    .then(() => {
                        this.is = !this.is
                        setTimeout(() => {
                            window.location.href = `/#/discuss?caricatureId=${this.caricatureId}&name=${this.name}`
                        }, 500);
                    })
            }
        },
        afterRead(file) {
            this.name = file.file
            this.setimg()
        },
        setimg() {
            let data = {
                userimg: this.name
            }
            axios({
                method: 'post',
                headers: {'Content-Type': 'multipart/form-data'},
                url: 'http://127.0.0.1/pingluen/img',
                data: Qs.stringify(data)
            }).catch((err)=>{
                console.log(err);
            })
        }
    }
}
</script>
<style lang="less" scoped>
header {
    width: 100%;
    position: fixed;
    top: 0;
    background-color: white;
    z-index: 99999999;
    border-bottom: .2667vw #767676 solid;

    .up {
        width: 100%;
        height: 7.5333vw;
        display: flex;
        padding: 2.6667vw 1.3333vw;

        .close {
            display: block;
            font-size: 5.3333vw;
            color: black;
            padding-left: 2.6667vw;
        }

        .name {
            display: block;
            font-size: 5.3333vw;
            color: black;
            font-size: 4.2667vw;
            margin: 0 auto;
        }
    }
}

main {
    img {
        display: block;
        width: 47.6667vw;
        height: auto;
        margin: 8vw auto;
        border-radius: 5.3333vw;
    }

    p {
        margin-top: -5.6vw;
        font-size: 5.3333vw;
        text-align: center;
    }

    .star2 {
        margin-top: -7.7333vw;
        width: 26.6667vw;
        height: 6.0333vw;
        overflow: hidden;
        font-size: 10.6667vw;
    }

    .star,
    .star2 {
        color: #ff9b11;
        font-size: 4.2667vw;
        font-size: 6.6667vw;

        i {
            margin: 1.6vw;
        }
    }

    .xing {
        width: 49.6vw;
        margin: 0 auto;
    }

    .pingfeng {
        color: #828482;
        font-size: 3.2vw;
        margin-top: 2.6667vw;
    }

    textarea {
        position: absolute;
        left: 50%;
        margin-left: -40vw;
        width: 80vw;
        height: 51.5667vw;
        resize: none;
    }

    .fabu {
        position: absolute;
        top:123vw;
        left: 50%;
        left: 50%;
        margin-left: -37.3333vw;
        width: 74.6667vw;
        height: 10.6667vw;
        background-color: skyblue;
        border-radius: 5.3333vw;
        text-align: center;
        line-height: 10.6667vw;
        color: white;
    }

    .on {
        background-color: rgb(12, 153, 218);
    }
}

.bengbu {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999999999;

    div {
        width: 53.3333vw;
        height: 53.3333vw;
        background-color: rgba(65, 52, 75, 0.8);
        border-radius: 5.3333vw;
        margin: 26.6667vw auto;
        color: white;
        font-size: 8vw;
        line-height: 53.3333vw;
        text-align: center;
    }
}
</style>